<template>
<page path-name="form">
    <panel title="Form表单">
        <v-form class-name="form-horizontal margin-bottom-40" id="form1" :rules="rules" :submit.sync="submit" @form:submit="submitHandle">
            <div class="form-group form-md-line-input">
                <label for="" class="col-md-2 control-label">文本框</label>
                <div class="col-md-4">
                    <input name="input" class="form-control">
                    <div class="form-control-focus">
                    </div>
                </div>
            </div>
            <div class="form-group form-md-line-input">
                <label class="col-md-2 control-label" for="form_control_1">Checkboxes</label>
                <div class="col-md-10">
                    <div class="md-checkbox-list">
                        <div class="md-checkbox">
                            <input type="checkbox" id="checkbox30" name="check1" value="1" class="md-check">
                            <label for="checkbox30">
                            <span></span>
                            <span class="check"></span>
                            <span class="box"></span>
                            Option 1 </label>
                        </div>
                        <div class="md-checkbox has-error">
                            <input type="checkbox" id="checkbox31" name="check1" value="2" class="md-check" checked>
                            <label for="checkbox31">
                            <span></span>
                            <span class="check"></span>
                            <span class="box"></span>
                            Option 2 </label>
                        </div>
                        <div class="md-checkbox has-warning">
                            <input type="checkbox" id="checkbox32" name="check1" value="3" class="md-check">
                            <label for="checkbox32">
                            <span></span>
                            <span class="check"></span>
                            <span class="box"></span>
                            Option 3 </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group form-md-line-input">
                <label class="col-md-2 control-label" for="form_control_1">Inline Checkboxes</label>
                <div class="col-md-10">
                    <div class="md-checkbox-inline">
                        <div class="md-checkbox">
                            <input type="checkbox" id="checkbox33" class="md-check">
                            <label for="checkbox33">
                            <span></span>
                            <span class="check"></span>
                            <span class="box"></span>
                            Option 1 </label>
                        </div>
                        <div class="md-checkbox has-error">
                            <input type="checkbox" id="checkbox34" class="md-check" checked>
                            <label for="checkbox34">
                            <span></span>
                            <span class="check"></span>
                            <span class="box"></span>
                            Option 2 </label>
                        </div>
                        <div class="md-checkbox has-info">
                            <input type="checkbox" id="checkbox35" class="md-check">
                            <label for="checkbox35">
                            <span></span>
                            <span class="check"></span>
                            <span class="box"></span>
                            Option 3 </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group form-md-line-input">
                <label class="col-md-2 control-label" for="form_control_1">Radios</label>
                <div class="col-md-10">
                    <div class="md-radio-list">
                        <div class="md-radio">
                            <input type="radio" id="radio50" name="radio211" value="1" class="md-radiobtn">
                            <label for="radio50">
                            <span></span>
                            <span class="check"></span>
                            <span class="box"></span>
                            Option 1 </label>
                        </div>
                        <div class="md-radio has-error">
                            <input type="radio" id="radio51" name="radio211" value="2" class="md-radiobtn" checked>
                            <label for="radio51">
                            <span></span>
                            <span class="check"></span>
                            <span class="box"></span>
                            Option 2 </label>
                        </div>
                        <div class="md-radio has-warning">
                            <input type="radio" id="radio52" name="radio211" value="3" class="md-radiobtn">
                            <label for="radio52">
                            <span></span>
                            <span class="check"></span>
                            <span class="box"></span>
                            Option 3 </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group form-md-line-input">
                <label class="col-md-2 control-label" for="form_control_1">Inline Radios</label>
                <div class="col-md-10">
                    <div class="md-radio-inline">
                        <div class="md-radio">
                            <input type="radio" id="radio53" name="radio2" class="md-radiobtn">
                            <label for="radio53">
                            <span></span>
                            <span class="check"></span>
                            <span class="box"></span>
                            Option 1 </label>
                        </div>
                        <div class="md-radio has-error">
                            <input type="radio" id="radio54" name="radio2" class="md-radiobtn" checked>
                            <label for="radio54">
                            <span></span>
                            <span class="check"></span>
                            <span class="box"></span>
                            Option 2 </label>
                        </div>
                        <div class="md-radio has-warning">
                            <input type="radio" id="radio55" name="radio2" class="md-radiobtn">
                            <label for="radio55">
                            <span></span>
                            <span class="check"></span>
                            <span class="box"></span>
                            Option 3 </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group form-md-line-input has-info">
                <label class="col-md-2 control-label" for="form_control_1">下拉框</label>
                <div class="col-md-4">
                    <select class="form-control edited" id="form_control_1">
                        <option value=""></option>
                        <option value="">Option 1</option>
                        <option value="">Option 2</option>
                        <option value="">Option 3</option>
                        <option value="">Option 4</option>
                    </select>
                    <div class="help-block">aaa</div>
                </div>
            </div>
            <div class="form-group form-md-line-input has-info">
                <label class="col-md-2 control-label" for="form_control_1">Textarea</label>
                <div class="col-md-4">
                    <textarea class="form-control" rows="3" placeholder="输入内容"></textarea>
                    <div class="help-block">aaa</div>
                </div>
            </div>
            <div class="form-group form-md-line-input has-info">
                <label class="col-md-2 control-label" for="form_control_1">图片上传</label>
                <div class="col-md-4">
                    <img-upload :width="150" :height="150" :get.sync="readImg" :data.sync="imgData"></img-upload>
                </div>
            </div>
            <div class="form-group form-md-line-input has-info">
                <label class="col-md-2 control-label" for="form_control_1">时间选择</label>
                <div class="col-md-4">
                    <time-slot :only-end="true" id="time1" name="time1" begin="2016-08-30 11:00" end="2016-08-31 08:00"></time-slot>
                </div>
            </div>
            <div class="form-group form-md-line-input has-info">
                <label class="col-md-2 control-label" for="form_control_1">时间选择2</label>
                <div class="col-md-4">
                    <time-slot :only-end="false" id="time2" name="time2" begin="2016-08-30 08:00" end="2016-08-31 08:00" :value.sync="'111'"></time-slot>
                </div>
            </div>
            <div class="form-group form-md-line-input has-info">
                <label class="col-md-2 control-label" for="form_control_1">富文本</label>
                <div class="col-md-4">
                    <v-editor name="editor" id="editor" :get.sync="readEditor" :data.sync="editorContent"  :height="200"></v-editor>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10" style="padding-top:20px;">
                    <button type="submit" class="btn blue" @click="submitReady" >确定</button>
                    <a href="javascript:;" class="btn bule" @click="showModal = true">button</a>
                </div>
            </div>
        </v-form>
    </panel>

    <modal title="aaa" :show.sync="showModal" id="aaa" :top="1000">aaaaa</modal>
</page>

</template>
<script>
import {Page,Panel,VForm,ImgUpload,VEditor,Modal,TimeSlot} from '../../../src/components'

export default{
    components:{
        Page,
        Panel,
        VForm,
        ImgUpload,
        VEditor,
        Modal,
        TimeSlot
    },
    data(){
        return {
            path: '',
            submit: false,
            rules:{
                input: {
                    required:true
                }
            },
            readImg: false,
            imgData: null,
            readEditor:false,
            editorContent: null,
            showModal: false
        }
    },
    route:{
        data({to:{path}}){
            this.path = path
        }
    },
    methods:{
        submitHandle(data){
            console.log(data)
            // this.readImg = true

            // this.$nextTick(()=>{
                this.submit = false
                console.log(this.imgData)
                console.log(this.editorContent)
            // })
        },
        submitReady(){

            this.submit = true
            this.readImg = true
            this.readEditor = true
        },
        read(data){
            console.log(data)
        }
    }
}
</script>